<template>
    <view class="w100">
        <u-overlay :show="show">
            <view class="fill flex-center flex-column">
                <view class="w100 p-x30 service-pop flex-column" style="align-items: center">
                    <text class="text-color-333 font-wight-700 mb-40" style="font-size: 38rpx; margin-top: 60rpx">联系客服</text>
                    <view class="v100 flex-column" style="align-items: center" v-if="qrcode">
                        <image @tap="preview" mode="aspectFit" :src="qrcode" style="width: 500rpx; height: 500rpx"></image>
                        <view class="tips text-color-999 mt-16">
                            <view class="text-color-666" style="font-size: 30rpx;">微信扫码添加客服</view>
                        </view>
                    </view>
                    <view class="v100" style="padding-top: 100rpx;" v-else>
                      <view class="v100 flex-column" style="height: 300rpx; align-items: center" v-if="!qrcode">
                        <u-icon color="orange" name="info-circle-fill" size="50px"></u-icon>
                        <text class="mt-20">未配置客服信息</text>
                      </view>
                    </view>

                </view>
                <view style="margin-top: 60rpx;">
                  <u-icon
                      @click="closeService"
                      color="#fff"
                      name="close-circle"
                      size="60rpx"
                  ></u-icon>
                </view>

            </view>
        </u-overlay>
    </view>
</template>

<script>
export default {
	name: 'service',
	props: {
    qrcode: {
      type: String,
      default: ''
    }
  },
	data() {
	    return {
	        show: false
	    };
	},
	methods: {
		closeService() {
		  this.show = false
		},
		preview() {
			try {
				uni.previewImage({
					urls: [this.qrcode]
				});
			} catch (err) {

			}
		}
	}
}
</script>
<style>
@import './service.css';
</style>
